<template>
	<view class="common-text-size">
		<view class="info">
			<view class="form">
				<text>手机号：</text><input type="text" placeholder="手机号" v-model="form.phonenumber" />
			</view>
			<view class="form">
				<text>密码：</text><input type="password" placeholder="密码" v-model="form.password" />
			</view>
			<view class="form">
				<text>确认密码：</text><input type="password" placeholder="密码" v-model="checkedPassword" />
			</view>
			<view class="form">
				<text>昵称：</text><input type="text" placeholder="昵称" v-model="form.nickName" />
			</view>
			<view class="form">
				<text>验证码：</text>
				<view class="form-code">
					<input style="width: calc(30vw);" type="text" v-model="form.codeStr" placeholder="验证码" />
					<text class="sendMsg" @click="sendMsg">{{msgTitle}}</text>
				</view>
			</view>
		</view>
		<view class="opt">
			<button @click="register">
				注册
			</button>
		</view>
		<view class="bottom-opt text-blue item-between common-width96 ml-2 mt-2">
			<text @click="toHome">返回首页</text>
			<text @click="toLogin">登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isTrue: true,
				msgTitle: "获取验证码",
				form: {
					phonenumber: "",
					password: "",
					codeStr: "",
					nickName: ""
				},
				uuid: "",
				checkedPassword: "",
			}
		},
		methods: {
			toHome() {
				uni.switchTab({
					url: "../../index/index"
				})
			},
			toLogin() {
				uni.navigateTo({
					url: "../login/login"
				})
			},
			register() {
				if (this.form.password != this.checkedPassword) {
					uni.showToast({
						title: "两次输入的密码不一样",
						icon: "none"
					})
					return false;
				}
				this.$http({
						url: `/user/add/${this.form.codeStr}/${this.uuid}`,
						method: "POST",
						token: false,
						data: this.form
					})
					.then(response => {
						let data = response.data;
						if (data.code == 200) {
							uni.navigateTo({
								url: "../login/login"
							})
						}
						console.log(data);
					}) // 验证/uuid
			},
			sendMsg() {
				let _this = this;
				if (this.form.phonenumber == null || this.form.phonenumber == '') {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
					return false;
				}
				if (this.isTrue) {
					// this.$http({
					// 	url: `/utils/send/msg?mobile=${this.form.phonenumber}`,
					// 	token: false
					// }).then(response => {
					//let data = response.data;
					//_this.uuid = data.msg;
					_this.setMsgTitle();
					// })
				}
			},
			setMsgTitle() {
				this.isTrue = false;
				let total = 60;
				let inte = setInterval(() => {
					this.msgTitle = total--;
					if (total == 0) {
						this.msgTitle = "重新获取";
						this.isTrue = true;
						clearInterval(inte);
					}
				}, 1000);
			}
		}
	}
</script>

<style>
	@import url("/static/css/common.css");

	.sendMsg {
		border-radius: calc(10vw);
		border: #999999 solid 1px;
		height: calc(5vh);
		width: calc(30vw);
		text-align: center;
		margin-left: calc(5vw);
	}

	.opt {
		width: calc(90vw);
		margin: calc(8vh) calc(3vw) calc(2vh) calc(3vw);
	}

	.opt button {}

	.form {
		width: calc(90vw);
		height: calc(8vh);
		margin: calc(2vh) calc(3vw) calc(2vh) calc(3vw);
		display: flex;
		justify-content: space-between;
		line-height: calc(5vh);
	}

	.form image {
		width: calc(30vw);
		height: calc(5vh);
		padding-left: calc(5vw);
	}

	.form-code {
		display: inline-flex;
		width: calc(67vw);
	}

	input {
		border: 1px solid #808080;
		border-radius: calc(5vw);
		padding-left: calc(2vw);
		height: calc(5vh);
		width: calc(65vw);
	}
</style>
